import React, { Component} from 'react';
import PropTypes from 'prop-types';

class TodoItem extends Component{
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this)
  }
  render () {
    console.log('child render')
    const {content, test} = this.props;
    return (
      <div onClick={this.handleClick}>
        {/* test */}
        {content}
      </div>
    )
    /* return React.createElement('div', {}, 'item'); */
  }
  shouldComponentUpdate(nextProps, nextState) {
    // 节省不必要的子组件render调用
    if (nextProps.content !== this.props.content) {
      return true
    } else {
      return false
    }
  }

  // 当一个组件从父组件接受了参数
  // 只要父组件的render函数被重新执行 子组件的这个生命周期函数就会被执行
  // --如果这个组件第一次存在于父组件中，不会执行
  // --如果这个组件之前已经存在于父组件中，才会执行
  componentWillReceiveProps() {
    console.log('child componentWillReceiveProps')
  }

  // 组件将被卸载
  componentWillUnmount() {
    console.log('child componentWillUnmount')
  }

  handleClick () {
    // alert(this.props.index)
    const {handleDelItem, index} = this.props
    handleDelItem(index)
    // this.props.handleDelItem(this.props.index)
  }
}

// 对组件属性的类型校验
TodoItem.propTypes = {
  test: PropTypes.string.isRequired, //.isRequired必传
  // --PropTypes.arrayOf指content应该是一个数组 数组的组成内容可以是string number
  // content: PropTypes.arrayOf(PropTypes.string, PropTypes.number),
  content: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // 类型是其中任一种都可以
  // content: PropTypes.string,
  handleDelItem: PropTypes.func,
  index: PropTypes.number
}

// 默认值
TodoItem.defaultProps = {
  test: 'hello'
}

export default TodoItem